<template>
  <div class="full">
    <mu-appbar color="teal">
      <mu-button v-if="hasreturn" icon slot="left" @click="$router.back()">
        <mu-icon value="chevron_left" color="#fff"/>
      </mu-button>

      <mu-flex align-items="center" slot="default">
        <mu-icon value="face" color="#fff"/>
        <span class="title">{{hi_title}}</span>
      </mu-flex>

      <mu-button to="/dorepairs" v-if="repair" icon slot="right">
        <mu-icon value="add_circle_outline" color="#fff"/>
      </mu-button>
      <mu-button v-else-if="help" icon slot="right" @click="openHelp">
        <mu-icon value="help_outline" color="#fff"/>
      </mu-button>
      <mu-button to="/myadvise" v-else-if="advises" icon slot="right">
        <mu-icon value="email" color="#fff"/>
      </mu-button>
      <mu-button v-else-if="searchRepair" icon slot="right" @click="showShBox">
        <mu-icon value="search" color="#fff"/>
      </mu-button>
      <template v-else-if="empty"></template>
      <!--主页默认的右侧图标-->
      <template v-else slot="right">
        <mu-button icon v-if="token !== ''" @click="doLogout">
          <mu-icon value="exit_to_app" color="#fff"/>
        </mu-button>
        <mu-button icon v-else-if="token === ''" @click="openLogin">
          <mu-icon value="account_circle" color="#fff"/>
        </mu-button>
      </template>
    </mu-appbar>

    <div class="full search-box" v-show="showsearch">
      <form @submit.prevent="doSearch">
        <div class="search">
          <input type="search" v-model="hsearchRepairKey">
          <mu-button icon color="primary" class="search-btn">
            <mu-icon value="search" color="#009688"/>
          </mu-button>
        </div>
      </form>
    </div>

    <mu-dialog :open.sync="helpOpen" title="报修提示" width="80%">
      报修的一些注意事项
      <mu-button slot="actions" flat color="primary" @click="closeHelp">Close</mu-button>
    </mu-dialog>
  </div>
</template>

<script>
  import {mapState, mapMutations, mapActions} from 'vuex'

  export default {
    name: "mainHeader",
    props: {
      repair: {
        default: false
      },
      help: {
        default: false
      },
      hasreturn: {
        default: false
      },
      advises: {default: false},
      empty: {default: false},
      searchRepair: {default: false},
      doSearch: {type: Function},
      title: {default: null}
    },
    data() {
      return {
        helpOpen: false,
        showsearch: false
      }
    },
    computed: {
      ...mapState(['user', 'searchRepairKey', 'token']),
      hsearchRepairKey: {
        get () {
          return this.searchRepairKey
        },
        set (val) {
          this.setSearchRepairKey(val)
        }
      },
      hi_title() {
        if (this.title != null) return this.title;
        if (this.user.houseNo.length > 0 && this.user.roomNo.length > 0) {
          return '欢迎您：' + this.user.houseNo + '#' + this.user.roomNo
        }
        return '游客'
      }
    },
    methods: {
      ...mapActions(['doLogout']),
      ...mapMutations(['setSearchRepairKey', 'updateOpenLogin']),
      openHelp () {
        this.helpOpen = true
      },
      closeHelp () {
        this.helpOpen = false
      },
      showShBox () {
        this.showsearch = !this.showsearch;
      },
      openLogin () {
        this.updateOpenLogin(true)
      }
    }
  }
</script>

<style scoped>
  .title {
    margin-left: 12px;
    font-size: 15px;
  }

  .search-box {
    position: fixed;
    top: 56px;
    left: 0;
    z-index: 100;
    width: 100%;
    padding: 1px 10px;
  }

  .search {
    position: relative;
  }

  .search input {
    width: 100%;
    padding: 8px;
    position: absolute;
    z-index: 100;
    outline: none;
    border-radius: 10px;
    border: 1px #009688 solid;
  }

  .search .search-btn {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 101;
    width: 40px;
    height: 40px;
  }
</style>
